import { PasswordInputDemos } from '@docs/demos';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.PasswordInput);

## Usage

<InputFeatures component="PasswordInput" element="input" />

<Demo data={PasswordInputDemos.usage} />

## Controlled

```tsx
import { useState } from 'react';
import { PasswordInput } from '@mantine/core';

function Demo() {
  const [value, setValue] = useState('');
  return (
    <PasswordInput
      value={value}
      onChange={(event) => setValue(event.currentTarget.value)}
    />
  );
}
```

## Controlled visibility toggle

Control visibility state with `visible` and `onVisibilityChange` props,
for example, the props can be used to sync visibility state between two inputs:

<Demo data={PasswordInputDemos.controlledVisibility} />

## Change visibility toggle icon

To change visibility toggle icon, pass a React component that accepts `reveal` prop to `visibilityToggleIcon`:

<Demo data={PasswordInputDemos.visibilityIcon} />

## Strength meter example

Password strength meter example with [Progress](/core/progress/) and [Popover](/core/popover/) components:

<Demo
  data={PasswordInputDemos.strengthMeter}
  demoProps={{ zIndex: 4 }}
/>

## Usage without visibility toggle

If you do not need visibility toggle button, use [TextInput](/core/text-input/) component instead:

```tsx
import { TextInput } from '@mantine/core';

function Demo() {
  return <TextInput type="password" />;
}
```

<InputSections component="PasswordInput" />

Note that when `rightSection` prop is used, visibility toggle button is not rendered.

<Demo data={PasswordInputDemos.sections} />

## Error state

<Demo data={PasswordInputDemos.error} />

## Disabled

When `disabled` prop is set, visibility toggle button is hidden:

<Demo data={PasswordInputDemos.disabled} />

<StylesApiSelectors component="PasswordInput" />

<Demo data={PasswordInputDemos.stylesApi} />

<GetElementRef component="PasswordInput" refType="input" />

<InputAccessibility component="PasswordInput" />

To set `aria-label` on the visibility toggle button, use `visibilityToggleButtonProps` prop:

```tsx
import { PasswordInput } from '@mantine/core';

function Demo() {
  return (
    <PasswordInput
      label="Password"
      visibilityToggleButtonProps={{
        'aria-label': 'Toggle password visibility',
      }}
    />
  );
}
```
